<template>
  <a-tabs type="card">
    <a-tab-pane key="1" title="SOP维护">
      <div class="pane">
        <div class="search-box">
          <a-space> </a-space>
          <a-space>
            <a-button type="primary" @click="saveSop()">
              <template #icon>
                <icon-plus />
              </template>
              新增sop
            </a-button>
          </a-space>
        </div>
        <tableTurn :tableData="getDemandAll" ref="tableRef">
          <a-table-column
            title="文件名称"
            data-index="fileName"
            align="center"
          />
          <a-table-column
            :width="190"
            fixed="right"
            title="操作"
            align="center"
          >
            <template #cell="{ record }">
              <a-space>
                <a-link @click="saveSop(record)"> 修改 </a-link>
                <a-popconfirm
                  content="是否删除该数据?"
                  type="error"
                  @ok="del(record.id)"
                >
                  <a-link status="danger"> 删除 </a-link>
                </a-popconfirm>
              </a-space>
            </template>
          </a-table-column>
        </tableTurn>
      </div>

      <a-modal
        :title="formData.id ? '修改sop' : '新增sop'"
        v-model:visible="visible"
        :width="800"
      >
        <template #footer>
          <a-space>
            <a-button type="primary" @click="handleOk">确定</a-button>
            <a-button @click="visible = false">取消</a-button>
          </a-space>
        </template>
        <a-spin :loading="loading">
          <a-form
            :model="formData"
            ref="refForm"
            field="fileName"
            auto-label-width
          >
            <a-row :gutter="8">
              <a-col :span="24">
                <a-form-item
                  label="文件别名"
                  field="fileName"
                  :rules="getRules('请填写文件别名')"
                >
                  <a-input
                    placeholder="填写文件别名"
                    v-model="formData.fileName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  label="选择文件:"
                  field="fileRemark"
                  :rules="getRules('请选择文件')"
                >
                  <UploadFile
                    ref="refUploadFile"
                    :limit="1"
                    v-model:fileList="fileList"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-spin>
      </a-modal>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup lang="ts">
  import {
    reactive,
    onMounted,
    ref,
    nextTick,
    computed,
    watch,
    watchEffect,
  } from 'vue';
  import { GetSetSopPage, SaveSetSop, DelSetSop } from '@/api/FactoryModeling';

  import { TSop } from '@/api/FactoryModeling/type';

  const props = withDefaults(
    //参数说明
    defineProps<{
      setId?: number;
    }>(),
    {}
  );
  const tableRef = ref();
  watch(
    () => props.setId,
    () => {
      tableRef.value.loadData();
    }
  );
  // 获取需求列表
  const getDemandAll = async (page: any) => {
    try {
      if (!props.setId) {
        return Promise.resolve({
          content: null,
          pageable: {
            pageNumber: 1,
            pageSize: 10,
            totalItems: 0,
            totalPages: 0,
          },
        });
      } else {
        let res = await GetSetSopPage({ ...page, setId: props.setId, type: 1 });
        return Promise.resolve(res);
      }
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let visible = ref(false);
  let formData = reactive<TSop>({});
  let refUploadFile = ref();
  watch(visible, (val) => {
    if (val) return;
    for (const key in formData) {
      delete formData[key];
    }
    refUploadFile.value.refresh();
  });
  let loading = ref(false);
  const del = async (id: number) => {
    await DelSetSop({ id });
    tableRef.value.loadData();
  };

  let refForm = ref();
  let handleOk = async () => {
    if (await refForm.value.validate()) return;
    await SaveSetSop({ setId: props.setId, ...formData });
    tableRef.value.loadData();
    visible.value = false;
  };

  let fileList = computed({
    get() {
      return formData.fileRemark
        ? [{ fileUrl: formData.fileRemark, fileName: formData.fileName }]
        : [];
    },
    set(val: any[]) {
      if (val[0]) formData.fileRemark = val[0].fileUrl;
    },
  });

  let saveSop = (data?: TSop) => {
    if (data) Object.assign(formData, data);
    visible.value = true;
  };
  let getRules = (name?: string) => {
    return [{ required: true, message: (name || '') + '不能为空' }];
  };
</script>

<style scoped>
  .pane {
    padding: 0 20px;
  }
  .search-box {
    padding-bottom: 10px;
  }
</style>
